
<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Fusion Tables Layer</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> 
google.load("visualization", "1", {packages:["corechart"]});

var div;
var data;
var row = 0;
var columnIndex = 0;
var currentEvent;
var columns = ['2000/01', '2001/02', '2002/03', '2003/04', '2004/05', '2005/06', '2006/07', '2007/08', '2008/09'];

function drawChart(e) {
  showlightbox();
  currentEvent = e;
  data = new google.visualization.DataTable();
  data.addColumn('string', 'Year');
  data.addColumn('number', 'Production');
  row = 0;
  columnIndex = 0;
  animateheight();
};

var height = 0; 
function animateheight() {
  document.getElementById('inner').style.height = height + 'px';
  height += 10;
  if (height < 425) {
    window.setTimeout(animateheight, 10);
  } else {
    animatewidth();
  }
}

var width = 0; 
function animatewidth() {
  document.getElementById('inner').style.width = width + 'px';
  width += 10;
  if (width < 510) {
    window.setTimeout(animatewidth, 10);
  } else {
    addRow();
  }
}


function addRow() {
  data.addRows(1);
  data.setValue(row, 0, columns[columnIndex]);
  data.setValue(row, 1, parseInt(currentEvent.row[columns[columnIndex]].value));
  row += 1;
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {width: 500, height: 400, title: 'Coffee production: ' + 
     currentEvent.row.Country.value, legend: 'none', titlePosition: 'out',
     titleTextStyle: { fontSize: 24 }, lineWidth: 4});
  columnIndex += 1;
  if (columnIndex < columns.length) window.setTimeout(addRow, 5);
}

function hidelightbox() {
  document.getElementById("outer").innerHTML  = "";
};

function showlightbox() {
  var div = document.createElement("div");
  div.style.background = "rgba(128, 128, 128, 0.5)"
  div.style.height = "100%";
  div.style.width = "100%";
  div.style.position = "absolute";
  div.style.top = "0px";
  div.style.left = "0px";
  div.style.display = "-webkit-box";
  div.style.webkitBoxPack = "center";
  div.style.webkitBoxAlign = "center";
  document.getElementById("outer").appendChild(div);

  var close = document.createElement("div");
  close.style.height = "12px";
  close.style.width = "12px";
  close.style.background = 'url(images/iw_close.gif)';
  close.style.zIndex = 10;
  close.onclick = hidelightbox;
 
  var title = document.createElement("div");
  title.style.width = "100%";
  title.style.textAlign = "center";
  title.style.display = "-webkit-box";
  title.style.height = "24pt";
  title.id = "title";

  // Inner
  var inner = document.createElement("div");
  inner.style.background = "white";
  inner.style.display = "-webkit-box";
  inner.style.webkitBoxOrient = "vertical";
  inner.style.borderRadius = "5px";
  inner.style.padding = "5px";
  inner.style.webkitBoxShadow = "5px 5px 5px #888";
  inner.id = 'inner';
  div.appendChild(inner);

  var chart = document.createElement("div");
  chart.style.display = "-webkit-box";
  chart.id = 'chart_div'; 
  inner.appendChild(close);
  inner.appendChild(chart);
}
 
function initialize() {
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
 
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: chicago,
    zoom: 2,
    mapTypeId: 'roadmap'
  });
      var off = [ { visibility: 'off' } ];
        var style = [
          {
            featureType: "all",
            elementType: "labels",
            stylers: off
          },{
            featureType: "all",
            elementType: "all",
            stylers: [
              { saturation: -100 }
            ]
          },{
            featureType: "poi",
            elementType: "all",
            stylers: off
          },{
            featureType: "landscape",
            elementType: "all",
            stylers: off
          },{
          },{
            featureType: "road",
            elementType: "all",
            stylers: off
          },{
            featureType: "administrative",
            elementType: "all",
            stylers: off
          }
        ];
 
        //map.mapTypes.set('styled', new google.maps.StyledMapType(style));
        //map.setMapTypeId('styled');

 
  layer = new google.maps.FusionTablesLayer(796845, {
    suppressInfoWindows: true
  });
  google.maps.event.addListener(layer, 'click', drawChart);
  layer.setMap(map);
}
</script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas"></div> 
  <div id="outer" style="height: 100%; width: 100%;">
  </div>
</body> 
</html> 
